<template>
  <!-- <div style="width:600px;">
        <svg width="100%" height="100%" viewBox="0 0 820 186">
            <g transform="matrix(1,0,0,1,0,0)">

                <path fill="rgb(124, 174, 70)"
                    d="M153.263 28.0227C156.286 24.8171 160.498 23 164.904 23H655.096C659.502 23 663.714 24.8171 666.737 28.0227L800.824 170.209C804.674 174.292 801.779 181 796.168 181H23.8324C18.2206 181 15.3261 174.292 19.1763 170.209L153.263 28.0227Z">
                </path>
            </g>
        </svg>
    </div> -->
  <!--  <svg width="800" height="600">
    <defs>
      <linearGradient data-v-bd423a18="" id="dangerous-gradient-away">
        <stop
          data-v-bd423a18=""
          offset="0%"
          stop-color="#BF1111"
          stop-opacity=".64"
        ></stop>
        <stop
          data-v-bd423a18=""
          offset="30%"
          stop-color="rgba(240,100,36, 1)"
          stop-opacity=".54"
        ></stop>
        <stop
          data-v-bd423a18=""
          offset="100%"
          stop-color="rgba(240,100,36, 1)"
          stop-opacity="0"
        ></stop>
      </linearGradient>
    </defs>
    <polygon
      data-v-bd423a18=""
      stroke="none"
      stroke-width="0"
      fill="url(#dangerous-gradient-away)"
      points="646.5,31.1 762.5,169.5 375.7,169.5  301.48,85.2 386.6,31.1"
    >
      <animate
        attributeName="points"
        begin="indefinite"
        data-delay="0"
        dur=".3s"
        rotate="auto"
        fill="freeze"
        from="646.5,31.1 762.5,169.5 375.7,169.5  301.48,85.2 386.6,31.1"
        to="646.5,31.1 762.5,169.5 264,169.5  192.4,86 309.4,31.1"
        class="animate-indefinite"
      ></animate>
    </polygon>
  </svg>-->

  <div>
    <div class="drop-down relative">
      {{ rowItem.lable }}
      <span @click="deletefn" class="absolute delete">X</span>
      <div class="absolute drop-down-box">
        <ul>
          <li
            v-for="(item, index) in motionsimulation"
            @click="dropdowm(item)"
            :key="index"
          >
            {{ item.lable }}
          </li>
        </ul>
      </div>
    </div>
    <div class="mt-16">
      X坐标:<input type="text" v-model="role.x" class="mr-16" />
      <button @click="role.x = Number(role.x) + 100">+100</button>
    </div>
    <div>
      Y坐标:<input type="text" v-model="role.y" class="mr-16" />
      <button @click="role.y = Number(role.y) + 100">+100</button>
    </div>
    <div>
      旋转角度:<input type="text" v-model="numRef" class="mr-16" />
      <button @click="numRef = Number(numRef) + 10">+10</button>
    </div>
    <div class="mt-16">
      <span
        class="onicon mr-16"
        :class="away == 1 ? 'on' : ''"
        @click="homeaway(1)"
        >主场</span
      >
      <span class="onicon" :class="away == 2 ? 'on' : ''" @click="homeaway(2)"
        >客场</span
      >
    </div>
    <button class="mt-16" @click="pushgManager">推送</button>
  </div>

  <section ref="box">
    <div class="svgdemo mt-16" :style="{ width: `${width}px`, height: 'auto' }">
      <svg
        class="svgbox"
        viewBox="0 0 820 300"
        id="svg"
        width="100%"
        height="100%"
        fill="transparent"
      >
        <defs>
          <animate
            id="self-ani"
            attributeName="points"
            repeatCount="indefinite"
            dur="1.5s"
            begin="0s"
          ></animate>
        </defs>
      </svg>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, watchEffect } from "vue";
import { useElementSize } from "@vueuse/core";
import { test2 } from "../scripts/test";
import { SnapTest } from "../scripts/SnapTest";
console.log(123)

const box = ref(null);
const { width, height } = useElementSize(box);
watchEffect(() => {
  console.log("width", width.value);
  console.log("height", height.value);
});

const role = ref({
  x: 0,
  y: 100,
});

const rowItem = ref({ value: null, lable: null });
const away: Ref<number> = ref(0);
const numRef: Ref<number> = ref(0);

const motionsimulation = ref([
  { value: 1, lable: "控球" },
  { value: 2, lable: "进球" },
  { value: 3, lable: "角球" },
  { value: 4, lable: "边线球" },
  { value: 5, lable: "换人" },
  { value: 6, lable: "越位" },
  { value: 7, lable: "射正" },
  { value: 8, lable: "射偏" },
  { value: 9, lable: "黄牌" },
  { value: 10, lable: "红牌" },
  { value: 11, lable: "受伤" },
  { value: 12, lable: "任意球" },
  { value: 13, lable: "点球大战" },
]);
let testCtx: SnapTest;
let testy: {
  action({
    type,
    ac,
    awayhome,
  }: {
    type?: number | undefined;
    ac?: {} | undefined;
    awayhome?: number | undefined;
  }): void;
  isPathfn: (boolean: boolean) => void;
  transtionform: (res: any, num: number) => void;
  pitch: (role: any) => void;
};
onMounted(() => {
  testCtx = new SnapTest("#svg");
  testCtx.svgelement();
  testCtx.pitch(role.value);
  testy = test2(testCtx);
  testy.pitch(role.value);
});
function homeaway(type: number) {
  away.value = type;
}
function deletefn() {
  rowItem.value = { value: null, lable: null };
}
function dropdowm(row: any) {
  rowItem.value = row;
}
// 推送动作
const pushgManager = () => {
  if (!(role.value.x > 0)) {
    testy.action({ type: 1, ac: rowItem.value, awayhome: away.value });

    // setTimeout(() => {
    //     testy.action({ type: 2, ac: rowItem.value, awayhome: away.value })
    // }, 500);

    // setTimeout(() => {
    //     testy.action({ type: 3, ac: rowItem.value, awayhome: away.value })
    // }, 1000);
  } else {
    // testCtx.isPathfn(true)
    // testCtx.transtionform(role.value)
    testy.isPathfn(true);
    testy.transtionform(role.value, numRef.value);
  }
};
</script>
<style>
.svgdemo {
  transform-style: preserve-3d;
  perspective: 180px;
  position: relative;

  /* width: 600px; */
  height: 100vh;
  display: flex;
  /* justify-content: center; */
}

.svgbox {
  /* position: absolute;
    left: 50%;
    top: 50%; */
  /* transform: translate(50%,50%); */
  /* transform: rotateX(14deg);
    transform-origin: bottom; */
  /* margin-left: 100px; */
}

.sss {
  animation: breathetransform 2s ease-in 1s;
  animation-iteration-count: infinite;
  transform-origin: 0px 0px;
}

.Outerring {
  animation: outerring 2s ease-in 1s;
  animation-iteration-count: infinite;
  transform-origin: 0px 0px;
}

@keyframes outerring {
  0% {
    r: 0;
  }

  25% {
    r: 32;
  }

  50% {
    r: 20;
  }

  100% {
    r: 32;
  }
}

@keyframes breathetransform {
  0% {
    r: 0;
  }

  25% {
    r: 16;
  }

  50% {
    r: 16;
  }

  100% {
    r: 16;
  }
}

.mr-16 {
  margin-right: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.drop-down {
  width: 400px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0 12px;
}

.delete {
  top: 0;
  right: 10px;
  list-style: none;
  display: none;
  cursor: pointer;
}

.drop-down-box {
  width: calc(100% - 20px);
  min-height: 100px;
  max-height: 200px;
  overflow: auto;
  top: 24px;
  left: 0;
  box-shadow: 0 0 7px 0px #eee;
  z-index: 10;
  background-color: white;
  display: none;
  padding: 10px;
}

.drop-down:hover .drop-down-box,
.drop-down:hover span {
  display: block;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  line-height: 22px;
}

li:hover {
  background-color: blue;
  color: white;
}

.stylecss {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, transparent, rgb(57, 56, 56));
}

.onicon {
  padding: 4px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
}

.onicon.on {
  background-color: rgb(56, 91, 232);
  color: white;
}
.points {
  animation: width 2s ease-in 1s;
}
</style>
